<template>
  <a-select
   :allowClear="true"
   show-search
    :value="value"
    placeholder="文件检索"
    style="width: 100%"
    :default-active-first-option="false"
    :show-arrow="false"
    :filter-option="false"
    :not-found-content="null"
    @search="fetchUser"
    @change="handleChange"
  >
    <a-spin v-if="fetching" slot="notFoundContent" size="small" />
    <a-select-option v-for="d in data" :key="d.uuid">
      {{ d.name }}
    </a-select-option>
  </a-select>
</template>
<script>
import debounce from 'lodash/debounce';
import { searchFiles } from "@/request/api";
export default {
  data() {
    this.lastFetchId = 0;
    this.fetchUser = debounce(this.fetchUser, 800);
    return {
      data: [],
      value: undefined,
      fetching: false,
    };
  },
   mounted() {
    this.id = this.$route.params.id;
   },
  methods: {
    fetchUser(value) {
      console.log('fetching user', value);
      this.lastFetchId += 1;
      const fetchId = this.lastFetchId;
      this.data = [];
      this.fetching = true;
      searchFiles(this.id,value).then(data=>{
          if (fetchId !== this.lastFetchId) {
            // for fetch callback order
            return;
          }
          this.data = data;
          this.fetching = false;
      }).catch(err=>{
        console.log(err)
        this.fetching = false;
      })
    },
    handleChange(value) {
      console.log(value)
      if(value!=undefined){
          console.log('开始调用父组件方法')
            // this.$emit('finddata',value)
      }
      let item =  this.data.filter(item=>item.uuid === value)
      if(item.length ==1){
        value = item[0].name
      }
     
      
    
      Object.assign(this, {
        value,
        data: [],
        fetching: false,
      });
    },
  }}
</script>